<!-- 岗位查找 -->
<template>
  <view class="search-job">
    <view class="search-job__input" @click="toSearch">
      <wd-icon name="search" size="32rpx" color="#FD7B1B"></wd-icon>
      <text class="ml-2">快来精准搜索专业/岗位/企业吧~</text>
    </view>
    <view class="search-job__type">
      <text
        v-for="item in types"
        :key="item.value"
        :class="{ active: currentType === item.value }"
        @click="handleChangeType(item.value)"
        >{{ item.label }}</text
      >
    </view>

    <jobCard
      v-for="(item, index) in list"
      :key="index"
      :class="{ 'mb-2': true, block: true }"
      :item="item"
    />
  </view>
</template>

<script lang="ts" setup>
  import jobCard from '@/pages/components/jobCard.vue';
  import { navigateTo } from '@/utils/router';
  defineProps({
    list: {
      type: Array,
      default: () => [],
    },
  });
  const emit = defineEmits(['getList']);
  const types = [
    { value: 1, label: '24H新增' },
    { value: 2, label: '7天新增' },
	{ value: 3, label: '热招岗位' },
  ];
  const currentType = ref(undefined);

  const handleChangeType = (type: number) => {
    currentType.value = type;
    emit('getList', type);
  };

  const toSearch = () => {
    navigateTo('/pages-sub/smartJobSelection/index');
  };
</script>

<style lang="scss" scoped>
  .search-job {
    margin: 24rpx 32rpx 0;
    padding: 24rpx;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(255, 255, 255, 0.7) 100%
    );
    border-radius: 20rpx 20rpx;
    &__input {
      padding: 24rpx 32rpx;
      background: #ffffff;
      border-radius: 16rpx;
      border: 2rpx solid #ff9703;
      color: rgba(62, 70, 84, 0.55);
    }

    &__type {
      display: flex;
      gap: 24rpx;
      text {
        margin: 24rpx 0;
        background: rgba(62, 70, 84, 0.09);
        font-weight: 600;
        font-size: 24rpx;
        color: rgba(62, 70, 84, 0.55);
        padding: 8rpx 24rpx;
        border-radius: 8rpx;
        &.active {
          background: linear-gradient(138deg, #fd771a 0%, #fea625 100%);
          color: #fff;
        }
      }
    }
  }
</style>
